<template>
    <div class="no-result">
        <div class="no-result-content">
            <div class="no-result-img"></div>
            <div class="title">{{title}}</div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'no-result',
    setup () {
        const title = ref<string>('暂无数据')
        const setTitle = (titleVal: string) => {
            title.value = titleVal
        }
        return {
            setTitle,
            title
        }
    }
})
</script>

<style lang="scss">
.no-result {
    .no-result-content {
        position: absolute;
        left: 50%;
        top: 50%;
        right: 50%;
        bottom: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        .no-result-img {
            width: 60px;
            padding-top: 60px;
            @include bg-image('no-result');
            background-size: cover;
        }
        .title {
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.3);
        }
    }
}
// @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
//     .no-result {
//         .no-result-content {
//             .no-result-img {
//                 background-image: url("./no-result@3x.png");
//             }
//         }
//     }
// }
</style>
